<template>
	<view class="">
		<div class="homebj">
			<div class="homebanner">
				<img :src="getImg1(datas.typeImg)">
			</div>
			<!-- 单位详情标签 -->
			<div class="danweixq">
				<div class="hdbmall dwxqposition">
					<div class="dwxqtitle">{{datas.name}}</div>
				</div>
			</div>
			<!-- 单位详情地址 -->
			<div class="hdbmall dwxqmargin">
				<div class="hdbmlist" v-if="datas.header != ''">
					<img :src="getImg('hdxq_fzr-1.png')" class="dwxqfzrimg">
					<div class="dwxqfzrtitle">负责人：{{datas.header}}</div>
				</div>
				<div class="hdbmlist" v-if="datas.phone != ''">
					<img :src="getImg('hdxq_dh-1.png')" class="dwxqfzrimg">
					<div class="dwxqfzrtitle">负责人电话：{{datas.phone}}</div>
				</div>
				<div class="hdbmlist" v-if="datas.description != ''">
					<div class="cgms">描述：{{datas.description}}</div>
				</div>
			</div>
			<div v-if="ydEwmShow">
				<div class="hometitle">扫码签到</div>
				<div>
					<img class="cgydewm" :src="'http://gk.dtly.cn/'+bookUrl"/>
				</div>
				<div class="cgydewmtxt">使用者：<span style="color:red">{{bookName}}</span>（{{bookCard}}）</div>
				<div class="cgydewmtxt">仅限 <span style="color:red">{{showBookDate}}</span> 使用</div>
			</div>
			<div class="homermqnzj">
				<div class="hometitle">场馆预定</div>
				<div class="cgydall">
					<block v-if="(ind<4)||(showdates.length==5&&ind==5)||(showdates.length>5&&datemore)"
						v-for="(el,ind) in showdates">
						<div v-if="nowInd==ind" style="background:#ffeb3b" class="cgydate" :src="getImg1(datas.typeImg)" @click="clickDate(ind)">
							<div class="cgydalllistname">{{el}}</div>
						</div>
						<div v-if="nowInd!=ind" class="cgydate" @click="clickDate(ind)">
							<div class="cgydalllistname">{{el}}</div>
						</div>
					</block>
					<div class="cgydate " v-if="showdates.length>5&&!datemore" @click="clickmore()">
						<div class="cgydalllistname">更多</div>
					</div>
					<div class="cgydate " v-if="showdates.length>5&&datemore" @click="clickmore()">
						<div class="cgydalllistname">收起</div>
					</div>
					<block v-for="(el,ind) in cgdatas">
						<div class="cgydalllist" v-if="nowInds==ind">
							<div class="cgydalllistname">{{el.timeName}}</div>
							<div class="cgydalltnr">
								<div style="background:#ffeb3b;"
									:class="['cgydallnrlist',(el.isOk == false? 'activeclor':'')]" @click="cgydclick(ind)">
									<div class="cgydallnrlistline">
										<span v-if="!el.isOk && el.isApply" class="colorfalse">已入选</span>
										<span v-if="!el.isOk && !el.isApply && el.isCheck==0"
											class="colorfalse">已报名</span>
										<span v-if="!el.isOk & el.isCheck==2" class="colorfalse">已驳回</span>
										<span v-if="el.isOk" class="colortrue">可预约</span>
									</div>
									<div class="cgydallnrlistline">入选名额：<span class="numcloat">{{el.ruxuan}}</span>
									</div>
									<div class="cgydallnrlistline">剩余名额：<span class="numcloat">{{el.timeNum-el.ruxuan}}</span></div>
								</div>
							</div>
						</div>
						<div class="cgydalllist" v-if="nowInds!=ind">
							<div class="cgydalllistname">{{el.timeName}}</div>
							<div class="cgydalltnr">
								<div :class="['cgydallnrlist',(el.isOk == false? 'activeclor':'')]" @click="cgydclick(ind)">
									<div class="cgydallnrlistline">
										<span v-if="!el.isOk && el.isApply" class="colorfalse">已入选</span>
										<span v-if="!el.isOk && !el.isApply && el.isCheck==0"
											class="colorfalse">已报名</span>
										<span v-if="!el.isOk & el.isCheck==2" class="colorfalse">已驳回</span>
										<span v-if="el.isOk" class="colortrue">可预约</span>
									</div>
									<div class="cgydallnrlistline">入选名额：<span class="numcloat">{{el.ruxuan}}</span>
									</div>
									<div class="cgydallnrlistline">剩余名额：<span
											class="numcloat">{{el.timeNum-el.ruxuan}}</span></div>
								</div>
							</div>
						</div>
					</block>
				</div>
			</div>
			<div class="hdbmsave" @click="ydxxData()" v-if="ydBtnShow">填写预定信息</div>
			<div class="ggydbmrxxall" v-if="ydDivShow">
				<div class="gbggyd" @click="gbggydclick()">×</div>
				<div class="hdbmlist">
					<div class="hdbmlisttop">
						<img :src="getImg('xingming.png')" class="hdbmlistimg">
						<div class="hdbmlistname">姓名</div>
					</div>
					<div class="hdbmlistbottom">
						<input type="text" class="hdbmlistinput" v-model="name">
					</div>
				</div>
				<div class="hdbmlist">
					<div class="hdbmlisttop">
						<img :src="getImg('xingbie.png')" class="hdbmlistimg">
						<div class="hdbmlistname">性别</div>
					</div>
					<div class="hdbmlistbottom">
						<picker  selector-type="select" :value="index" :range="arry" @change="setSex">
							<view>{{arry[index]}}</view>
						</picker>
						<!-- <select class="hdbmlistselect" v-model="sex">
							<option value="true">男</option>
							<option value="false">女</option>
						</select> -->
					</div>
				</div>
				<div class="hdbmlist">
					<div class="hdbmlisttop">
						<img :src="getImg('shenfenzhenghao.png')" class="hdbmlistimg">
						<div class="hdbmlistname">身份证号码</div>
					</div>
					<div class="hdbmlistbottom">
						<input type="text" class="hdbmlistinput" v-model="cardNo">
					</div>
				</div>
				<div class="hdbmlist">
					<div class="hdbmlisttop">
						<img :src="getImg('lianxidianhua.png')" class="hdbmlistimg">
						<div class="hdbmlistname">联系电话</div>
					</div>
					<div class="hdbmlistbottom">
						<input type="text" class="hdbmlistinput" v-model="phone">
					</div>
				</div>
				<div class="hdbmlist" v-if="datas.ways == 2 && datas.amount != 0">
					<div class="hdbmlisttop">
						<img :src="getImg('baomingfeiyong.png')" class="hdbmlistimg">
						<div class="hdbmlistname">报名费用</div>
					</div>
					<div class="hdbmlistbottom">
						<input type="text" readonly class="hdbmlistinput" :value="datas.amount+'元'">
					</div>
				</div>
				<div class="hdbmsave" @click="saveData()">预定</div>
			</div>
			<div style="width:100%;height:100px;"></div>
		</div>
	</view>
</template>

<script>
	import web from '../../components/utils/request.js';
	//格式化日期。年月日，补0
	function formatDateYMD(tdate, isStr) {
	    var date = isStr ? new Date(tdate) : tdate;
	    var myyear = date.getFullYear();
	    var mymonth = date.getMonth() + 1;
	    var myweekday = date.getDate();
	
	    if (mymonth < 10) {
	        mymonth = "0" + mymonth;
	    }
	    if (myweekday < 10) {
	        myweekday = "0" + myweekday;
	    }
	    return (myyear + "-" + mymonth + "-" + myweekday);
	}
	//格式化日期。年-月-日转月日
	function formatMD(str) {
	    var tmp = str.split('-');
	    return tmp[1]+"月"+tmp[2]+"日";
	}
	export default {
		data() {
			return {
				id: '',//页面传参的预定场馆的ID
				today : "",//页面传参的场馆预订时间
				datas: {},
				cgdatas: [],
				alldates : [],     //可预定的日期区间
				showdates : [],      //可预定的日期区间
				datemore:false,     //是否显示更多
				ydBtnShow: false,//填写信息预定按钮
				ydDivShow: false,//填写信息页面
				ydEwmShow: false,  //预定二维码显示
				name: '',//预定人名称
				sex: true,//预定人性别  true 男 false 女
				phone: '',//预定人电话
				cardNo:'',//预定人身份证号
				timeId:0,
				bookDate: '',//预定场馆时间
				showBookDate:'',
				bookName: '',
				bookCard: '',
				bookUrl:'',//预定二维码
				nowInds:-1,
				nowInd:0,
				index:0,
				arry:['男','女']
			}
		},
		onLoad(options) {
			this.id=options.id;
			this.today=options.book_time;
			this.getData();
		},
		methods: {
			setSex(e){
				console.log(e)
				this.index=e.detail.value;
				if(this.index==0){
					this.sex=true;
				}else{
					this.sex=false;
				}
			},
			getImg(url) {
				return 'https://ruianm.tour-ma.com/r/cms/www/m/huodong/img/' + url;
			},
			getImg1(url) {
				return 'https://ruianm.tour-ma.com' + url;
			},
			getData(){
				var url = "/conferenceDetail.jspx";
				var arg = {id:this.id,today:this.today};
				var that = this;
				web.httpPost(that, url, arg, function(res) {
					that.datas = res.data.data;
					//循环取14天
					for(var i=0; i<14; i++){
					    var tmp = that.getAddDate(i);
					    if(that.checkTime(tmp + " " + "00:00:00",res.data.data.end_time)){
					        that.alldates.push(tmp);
					        that.showdates.push(formatMD(tmp));
					    }else{
					        break;
					    }
					}
					if(that.alldates.length>0){
					    that.clickDate(0);
					}
				})
			},
			//时间比较，是否大于当前时间。超过则表示已结束
			checkTime:function(stime, etime){
				var time1 = new Date(stime).getTime();
			    var time2 = (new Date(etime)).getTime();
				if(time1 < time2) {
					return true;
				}else{
					return false;
				}
			},
			//增加天数
			getAddDate:function(num){
			    var date = new Date();
			    //先获得对应周一日期
			    var nowTime = date.getTime() ; 
			    var day = date.getDay();
			    var oneDayLong = 24*60*60*1000 ; 
			    var LastTime = nowTime + num*oneDayLong  ;
			    var tmp = new Date(LastTime);
			    return formatDateYMD(tmp);
			},
			//日期选择更多
			clickmore:function(){
			    this.datemore = !this.datemore;
			},
			//选择日期按钮
			cgydclick: function(ind) {
				this.nowInds = ind;
			    this.ydEwmShow = false;
			    if(this.cgdatas[ind].isOk) {
			        this.ydBtnShow = true;
			        this.timeId = this.cgdatas[ind].timeId;
			    }else{
			        this.ydBtnShow = false;
			    }
			
			    if(this.cgdatas[ind].isApply){
			        this.ydEwmShow = true;
			        this.bookName = this.cgdatas[ind].name;
			        this.bookCard = this.cgdatas[ind].cardNo;
			        this.showBookDate = this.bookDate+"日"+this.cgdatas[ind].timeName;
			        this.bookUrl = this.cgdatas[ind].url;
			    }
			},
			//选择日期,获取可预订信息
			clickDate:function(ind){
				this.nowInd = ind;
			    this.bookDate = this.alldates[ind];
			    this.ydEwmShow = false;
			    var url = "/con_book.jspx";
			    var arg = {id:this.id,time:this.alldates[ind]};
				var that=this;
				web.httpPost(that,url,arg,function(res){
					that.cgdatas=[];
					for(var i=0; i<res.data.data.length; i++){
						var tmp = res.data.data[i];
						that.cgdatas.push(tmp);
					}
				})
			},
			//显示预订信息填写DIV
			ydxxData: function() {
			    this.ydDivShow = true;
			},
			//关闭预订信息填写DIV
			gbggydclick: function() {
			    this.ydDivShow = false;
			    this.name = '';
			    this.phone = '';
			    this.cardNo = '';
			},
			saveData(){
				if(this.name == ''){
				    uni.showToast({
				    	title: '姓名必填'
				    });
				    return;
				}
				if(this.phone == ''){
					uni.showToast({
						title: '电话必填'
					});
				    return;
				}
				if(this.cardNo == ''){
					uni.showToast({
						title: '身份证必填'
					});
				    return;
				}
				var url = "/reservation.jspx";
				var arg = {
				    name:this.name,
				    sex:this.sex,
				    cardNo: this.cardNo,
				    phone:this.phone,
				    id:this.datas.id,
				    bookDate:this.bookDate,
				    timeId:this.timeId
				};
				var that = this;
				web.httpPost(that, url, arg, function(res) {
					uni.showToast({
						title: res.data.message
					});
					setTimeout(function(){
						uni.navigateBack({
							delta:1
						})
					},500)
				})
			}
		}
	}
</script>

<style>
	@import url("@/components/css/datascss.css");
</style>
